<gf-dialog-header
  position="center"
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
/>

<div class="flex-grow-1" mat-dialog-content>
  <div class="container p-0">
    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="user?.id">User ID</gf-value>
      </div>
      <div class="col-6 mb-3">
        <gf-value i18n size="medium" [value]="user?.role">Role</gf-value>
      </div>
    </div>

    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [isDate]="true"
          [locale]="data.locale"
          [value]="user?.createdAt"
          >Registration Date</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.provider"
          >Authentication</gf-value
        >
      </div>
    </div>

    @if (data.hasPermissionForSubscription) {
      <div class="mb-3 row">
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [value]="user?.subscription ? 'Premium' : 'Basic'"
            >Membership</gf-value
          >
        </div>
        <div class="col-6 mb-3">
          <gf-value i18n size="medium" [value]="user?.country"
            >Country</gf-value
          >
        </div>
      </div>
    }

    <div class="mb-3 row">
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.accountCount"
          >Accounts</gf-value
        >
      </div>
      <div class="col-6 mb-3">
        <gf-value
          i18n
          size="medium"
          [locale]="data.locale"
          [value]="user?.activityCount"
          >Activities</gf-value
        >
      </div>
    </div>

    @if (data.hasPermissionForSubscription) {
      <div class="mb-3 row">
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [precision]="0"
            [value]="user?.engagement"
            >Engagement per Day</gf-value
          >
        </div>
        <div class="col-6 mb-3">
          <gf-value
            i18n
            size="medium"
            [locale]="data.locale"
            [value]="user?.dailyApiRequests"
            >API Requests Today</gf-value
          >
        </div>
      </div>
    }
  </div>
</div>

<gf-dialog-footer
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
/>
